<template>
 <div class="input-box">
    <input class="my-input" @input="inputChange" v-model="inputValue" >
    <i class="react" @click="react" v-show="show">x</i>
 </div>
</template>

<script>
 export default {
   name:'InputBox',
   data(){
       return{
           inputValue:'',
           show:false
       }
   },
   methods:{
       inputChange(){
           if(this.inputValue===''){
              this.show=false
           }else{
              this.show=true
              this.$emit('inputChange',this.inputValue)
           }
       },
       react(){
           this.inputValue = ''
           this.show=false
       }
   }
 }
</script>

 
<style scoped>
.input-box{
    margin:20px 30px;
    position: relative;
}
 .my-input{
     height: 40px;
     width: 200px;
     outline: none;
     border:1px solid #ccc;
     border-radius: 5px;
     padding:0 10px;
     font-size: 14px;
     
 }
 .my-input:focus{
     border: 2px solid rgb(126, 29, 252);
 }
 .react{
     position: absolute;
     left:180px;
     top:10px;
     cursor: pointer;
 }
 .react:hover{
     color: #333;
 }
</style>
